<template>
  <div>
    <el-drawer v-bind="$attrs" v-on="$listeners" @opened="onOpen" @close="onClose">
      <div class="action-bar" :style="{ 'text-align': 'right' }">
        <div v-if="showActionBar" class="inline-block mr-10">
          <span class="bar-btn" @click="refresh(1)">JSON</span>
          <span class="bar-btn" @click="refresh(3)">XML</span>
          <span class="bar-btn" @click="refresh(2)">ASN.1</span>
        </div>
        <div>
          <span class="bar-btn copy-btn" @click="copy">
            <i class="el-icon-document-copy" />Copy
          </span>
          <span class="bar-btn delete-btn" @click="$emit('update:model-value', false)">
            <i class="el-icon-circle-close" />
            {{ $t('common.close') }}
          </span>
        </div>
      </div>
      <div
        id="preview-container"
        v-loading="loading"
        class="preview-container"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.8)"
        element-loading-text="Loading"
      >
        <json-viewer
          v-if="fileType === 1"
          :show-array-index="false"
          class="jsonShow"
          theme="my-awesome-json-theme"
          :value="content"
          :expand-depth="10"
          copyable
          sort
          show-double-quotes
        />
        <div v-else-if="fileType === 2" class="relative asn1">
          <div id="dump" ref="dump" style="position: absolute; right: 0px;" />
          <div id="tree" ref="tree" />
        </div>
        <highlightjs v-else-if="fileType === 3" autodetect language="xml" :code="xml" />
      </div>
    </el-drawer>
    <input id="copyNode" type="hidden">
  </div>
</template>

<script>
import hljs from 'highlight.js/lib/core'
import xml from 'highlight.js/lib/languages/xml'
import hljsVuePlugin from '@highlightjs/vue-plugin'
hljs.registerLanguage('xml', xml)
import JsonViewer from 'vue-json-viewer'
import { decodeText } from 'static/asn1/index'
import 'highlight.js/styles/monokai.css'

export default {

  components: {
    JsonViewer,
    highlightjs: hljsVuePlugin.component
  },
  props: {
    content: {
      type: [String, Object],
      required: true
    },
    fileType: {
      type: Number
    },
    showActionBar: {
      type: Boolean,
      default: true
    },
    loading: Boolean,
    xml: ''
  },
  data() {
    return {
      copyText: ''
    }
  },

  mounted() {
  },
  methods: {
    onOpen() { },
    onClose() { },
    async copy() {
      try {
        if (this.fileType === 1) {
          this.copyText = JSON.stringify(this.content)
        } else if (this.fileType === 3) {
          this.copyText = this.content
        }
        await navigator.clipboard.writeText(this.copyText)

        this.$notify({
          duration: 2000,
          title: 'Success',
          message: 'Copied',
          type: 'success',
          position: 'bottom-right'
        })
      } catch (err) {
        console.error('Failed to copy: ', err)
      }
    },
    decode(text) {
      this.$nextTick(() => {
        const tree = this.$refs.tree
        const dump = this.$refs.dump
        this.copyText = decodeText(text, tree, dump)
      })
    },
    refresh(fileType) {
      try {
        this.$emit('refresh', fileType)
      } catch (error) {
        this.$notify({
          title: this.$t('common.error'),
          message: this.$t('flyparam.wrong_js_format'),
          type: 'error'
        })
      }
    }
  }
}
</script>

<style lang="scss">
@import '@/styles/json-viewer.scss';
@import '@/styles/asn1.scss';
</style>

<style lang="scss" scoped>
@import '@/styles/mixin.scss';
@include action-bar;

::v-deep .el-drawer__header {
  display: none;
}

::v-deep .hljs {
  background: #1e1e1e;
}

.json-editor {
  height: calc(100vh - 33px);
}

.preview-container {
  padding: 10px;
  background-color: #1e1e1e;
  min-height: calc(100vh - 33px);
}
</style>
